
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Badge } from "@/components/ui/badge";
import { 
  BookOpen, 
  MessageCircle, 
  Brain, 
  Users, 
  ArrowRight 
} from "lucide-react";

export const RecommendedCommunitiesStudent = () => {
  const subjectStudyCircles = [
    { 
      name: "Math Buddies", 
      members: 124, 
      description: "Collaborative problem-solving and homework help", 
      tags: ["#calculus", "#algebra", "#geometry"]
    },
    { 
      name: "Science Lab", 
      members: 89, 
      description: "Lab discussions and concept clarification", 
      tags: ["#physics", "#chemistry", "#biology"]
    },
    { 
      name: "Language Exchange", 
      members: 156, 
      description: "Practice conversations and cultural exchange", 
      tags: ["#spanish", "#french", "#english"]
    }
  ];

  const peerSupportForums = [
    { 
      name: "Study Routine Club", 
      members: 234, 
      description: "Time management and productivity strategies", 
      tags: ["#productivity", "#habits", "#focus"]
    },
    { 
      name: "Exam Prep Warriors", 
      members: 189, 
      description: "Support and strategies for test preparation", 
      tags: ["#exams", "#stress", "#motivation"]
    }
  ];

  const projectLabs = [
    { 
      name: "PBL Hackers", 
      members: 98, 
      description: "Build cool projects and learn together", 
      tags: ["#coding", "#innovation", "#teamwork"]
    },
    { 
      name: "Creative Studio", 
      members: 76, 
      description: "Art, design, and creative challenges", 
      tags: ["#art", "#design", "#creativity"]
    },
    { 
      name: "Debate Society", 
      members: 134, 
      description: "Weekly debates on current topics", 
      tags: ["#debate", "#critical-thinking", "#current-events"]
    }
  ];

  const CommunityCard = ({ community }: { community: any }) => (
    <Card className="hover:shadow-md transition-all duration-200 cursor-pointer group">
      <CardContent className="p-6">
        <div className="flex items-start justify-between mb-3">
          <h4 className="font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">{community.name}</h4>
          <span className="text-sm text-gray-500">{community.members} members</span>
        </div>
        <p className="text-sm text-gray-600 mb-3">{community.description}</p>
        <div className="flex flex-wrap gap-1 mb-4">
          {community.tags.map((tag: string, index: number) => (
            <Badge key={index} variant="secondary" className="text-xs">
              {tag}
            </Badge>
          ))}
        </div>
        <Button size="sm" className="w-full bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white">
          <Users className="w-4 h-4 mr-2" />
          Join Group
        </Button>
      </CardContent>
    </Card>
  );

  return (
    <Card className="bg-white shadow-sm border">
      <CardHeader>
        <CardTitle className="text-xl font-semibold flex items-center gap-2">
          <Users className="w-6 h-6 text-blue-600" />
          Recommended Communities
        </CardTitle>
        <p className="text-gray-600">
          Join specialized groups tailored to your learning interests and goals.
        </p>
      </CardHeader>
      <CardContent>
        <Tabs defaultValue="subject-circles" className="w-full">
          <TabsList className="grid w-full grid-cols-3 mb-6">
            <TabsTrigger value="subject-circles" className="text-sm">📘 Subject Study Circles</TabsTrigger>
            <TabsTrigger value="peer-support" className="text-sm">💬 Peer Support Forums</TabsTrigger>
            <TabsTrigger value="project-labs" className="text-sm">🧠 Project Labs</TabsTrigger>
          </TabsList>

          <TabsContent value="subject-circles">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
              {subjectStudyCircles.map((community, index) => (
                <CommunityCard key={index} community={community} />
              ))}
            </div>
          </TabsContent>

          <TabsContent value="peer-support">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
              {peerSupportForums.map((community, index) => (
                <CommunityCard key={index} community={community} />
              ))}
            </div>
          </TabsContent>

          <TabsContent value="project-labs">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
              {projectLabs.map((community, index) => (
                <CommunityCard key={index} community={community} />
              ))}
            </div>
          </TabsContent>
        </Tabs>

        <div className="text-center">
          <Button variant="ghost" className="text-blue-600 hover:text-blue-700">
            Explore All Communities <ArrowRight className="w-4 h-4 ml-1" />
          </Button>
        </div>
      </CardContent>
    </Card>
  );
};
